<style>
    #Main {
        width: 1000px;
        height: 640px;
        margin: 30px auto 0px;
        ;
    }
    
    #Main ul li {
        list-style-type: none;
        float: left;
        width: 288px;
        height: 180px;
        border: 4px solid #fff;
        margin: 10px 17px;
        ;
        box-shadow: 5px 5px 10px #000;
    }
    
    .gray {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        position: fixed;
        top: 0px;
        left: 0px;
        display: none;
    }
    
    .showImg {
        width: 650px;
        height: 406px;
        background: #fff;
        position: absolute;
        top: 100px;
        left: 50%;
        margin-left: -300px;
        padding: 10px;
    }
    
    .showImg img.but_l {
        position: absolute;
        top: 170px;
        left: -70px;
        cursor: pointer;
    }
    
    .showImg img.but_r {
        position: absolute;
        top: 170px;
        right: -70px;
        cursor: pointer;
    }
</style>
</head>

<body>
    <div id="Main">
        <ul>
            <li>
                <img src="/img/qqImages/s1.jpg" bigSrc="/img/qqImages/big1.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s2.jpg" bigSrc="/img/qqImages/big2.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s3.jpg" bigSrc="/img/qqImages/big3.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s4.jpg" bigSrc="/img/qqImages/big4.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s5.jpg" bigSrc="/img/qqImages/big5.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s6.jpg" bigSrc="/img/qqImages/big6.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s7.jpg" bigSrc="/img/qqImages/big7.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s8.jpg" bigSrc="/img/qqImages/big8.jpg" />
            </li>
            <li>
                <img src="/img/qqImages/s9.jpg" bigSrc="/img/qqImages/big9.jpg" />
            </li>
        </ul>
    </div>
    <div class="gray">
        <div class="showImg">
            <img src="/img/qqImages/big1.jpg" class="show_img" />
            <img src="/img/qqImages/dirl.png" class="but_l btn-left" />
            <img src="/img/qqImages/dirr.png" class="but_r btn-right" />
        </div>
    </div>
</body>
<script type="text/javascript">
    var bImg = null;
    var index = 0;
    var imgList = document.querySelectorAll('#Main ul>li');
    var imgs = document.querySelectorAll('#Main ul>li>img');
    var gray = document.querySelector('.gray');
    var showImg = document.querySelector('.show_img');
    var leftBtn = document.querySelector('.btn-left');
    var rightBtn = document.querySelector('.btn-right');


    imgList.forEach(function(ele, index) {
        ele.onclick = function() {
            var src = this.children[0].getAttribute('bigSrc');
            gray.style.display = 'block';
            showImg.src = src;
            showImg.setAttribute('index', index);
        }
    });

    gray.onclick = function(e) {
        if (e.target == this) {
            this.style.display = 'none';
        }
    }

    rightBtn.onclick = function() {
        var index = +showImg.getAttribute('index');
        index++;
        if (index == imgs.length) {
            index = 0;
        }
        showImg.src = imgs[index].getAttribute('bigSrc');
        showImg.setAttribute('index', index);
    }
    leftBtn.onclick = function() {
        var index = +showImg.getAttribute('index');
        index--; // 2
        if (index < 0) {
            index = imgs.length - 1;
        }
        console.log(index);

        showImg.src = imgs[index].getAttribute('bigSrc');
        showImg.setAttribute('index', index);
    }
</script>